<template>
  <div class="deposit">
    <!--S头部操作区域-->
    <div id="header">
      <el-select
        v-model="headerSelect.value"
        @change="selectChange"
      >
        <el-option label="等待提现" value="0" />
        <el-option label="提现完成" value="1" />
        <el-option label="提现失败" value="2" />
      </el-select>
      <el-button
        v-if="headerSelect.value === '0'"
        class="all-deposit-button"
        type="primary"
        @click="multiDeposit"
      >
        批量提现
      </el-button>
    </div>
    <!--E头部操作区域-->
    <!--S数据表格-->
    <el-table
      ref="table"
      :data="data"
      @selection-change="selectDeposit"
    >
      <el-table-column type="selection" />
      <el-table-column prop="member_id" label="用户ID" />
      <el-table-column prop="member.nickname" label="昵称" />
      <el-table-column prop="member.avatar" label="头像">
        <template slot-scope="scope">
          <img :src="scope.row.member.avatar" style="width: 40px;height: 40px;">
        </template>
      </el-table-column>
      <el-table-column prop="money" label="提现金额">
        <template slot-scope="scope">
          {{ scope.row.money }}元
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态">
        <template slot-scope="scope">
          <template v-if="scope.row.status === 0">待提现</template>
          <template v-else-if="scope.row.status === 1">已提现</template>
          <template v-else-if="scope.row.status === 2">失败</template>
        </template>
      </el-table-column>
      <el-table-column prop="time" label="申请时间" />
      <el-table-column v-if="headerSelect.value === '0'" prop="handle" label="操作">
        <template slot-scope="scope">
          <el-button-group>
            <el-button type="primary" size="mini" @click="deposit(scope.row.id)">提现</el-button>
            <el-button type="danger" size="mini" @click="refuse(scope.row.id)">拒绝</el-button>
          </el-button-group>
        </template>
      </el-table-column>
    </el-table>
    <!--E数据表格-->
    <!--S分页-->
    <div id="pagination">
      <el-pagination
        layout="prev, pager, next"
        :page-size="page_size"
        :total="total"
        @current-change="changePage"
      />
    </div>
    <!--E分页-->

    <!--S批量提现组件-->
    <deposit-all
      v-if="DepositAll.show"
      :total="select_data.length"
      :success_number="DepositAll.success"
      :error_number="DepositAll.error"
    >
    </deposit-all>
    <!--E批量提现组件-->
  </div>
</template>

<script>
import DepositAll from './components/deposit-all'
export default {
  name: 'Deposit',
  components: {
    DepositAll
  },
  data() {
    return {
      // 是否正在请求中
      request: false,
      // 提现总数
      total: 0,
      page_size: 10,
      page: 1,
      data: [],
      // 头部选择
      headerSelect: {
        value: '0'
      },
      // 多选提现数据id
      select_data: [],
      // 批量提现提示组件
      DepositAll: {
        show: false,
        success: 0,
        error: 0
      }
    }
  },
  mounted() {
    this.getTotal()
    this.getList()
  },
  methods: {
    // 数据总数
    getTotal() {
      this.$get('deposit/total', {
        status: this.headerSelect.value
      })
        .then((res) => {
          this.total = res.data.data
        })
    },
    // 提现列表
    getList() {
      this.$get('deposit', {
        status: this.headerSelect.value,
        limit: [(this.page - 1) * this.page_size, this.page_size]
      })
        .then((res) => {
          this.data = res.data.data
        })
    },
    // 切换页面
    changePage(page) {
      this.page = page
    },
    // 请求提现审核状态更改
    selectChange() {
      this.page = 1
      this.getTotal()
      this.getList()
    },
    // 选择提现
    selectDeposit(selection) {
      const select = []
      selection.forEach((item) => {
        select.push(item.id)
      })
      this.select_data = select
    },
    // 发送提现
    deposit(deposit_id) {
      if (this.request) {
        this.$alert('操作频繁,请稍等', '提示')
        return false
      }
      this.$confirm('提现金额将直接到账用户微信钱包', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.request = true
          this.submitDeposit(deposit_id)
            .then(() => {
              this.request = false
              this.getTotal()
              this.getList()
            })
            .catch((err) => {
              this.request = false
              this.$handleError(err)
            })
        })
    },
    // 拒绝提现
    refuse(deposit_id) {
      if (this.request) {
        this.$alert('操作频繁,请稍等', '提示')
        return false
      }
      this.$confirm('提现金额将直接到账用户微信钱包', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.request = true
          this.$put('deposit/refuse/' + deposit_id)
            .then(() => {
              this.request = false
              this.getTotal()
              this.getList()
            })
            .catch((error) => {
              this.request = false
              this.$handleError(error)
            })
        })
    },
    // 批量提现
    multiDeposit() {
      if (this.request) {
        this.$alert('操作频繁,请稍等', '提示')
        return false
      }
      if (this.select_data.length <= 0) {
        this.$alert('至少选择一个提现申请', '提示')
        return false
      }
      this.DepositAll.success = 0
      this.DepositAll.error = 0
      this.$confirm('确定处理批量提现吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.request = true
          this.DepositAll.show = true
          this.select_data.forEach((item, index) => {
            return this.submitDeposit(item)
              .then(() => {
                this.DepositAll.success++
                if (index >= this.select_data.length - 1) {
                  setTimeout(() => {
                    this.request = false
                    this.DepositAll.show = false
                    this.select_data = []
                    this.getList()
                    this.getTotal()
                  }, 3000)
                }
              })
              .catch(() => {
                this.DepositAll.error++
                if (index >= this.select_data.length - 1) {
                  setTimeout(() => {
                    this.request = false
                    this.DepositAll.show = false
                    this.select_data = []
                    this.getList()
                    this.getTotal()
                  }, 3000)
                }
              })
          })
        })
    },
    // 发送提现申请
    submitDeposit(deposit_id) {
      return new Promise((resolve, error) => {
        this.$put('deposit/' + deposit_id)
          .then(() => {
            resolve()
          })
          .catch((err) => {
            error(err)
          })
      })
    }
  }
}
</script>

<style scoped lang="scss">
  .deposit{
    #header{
      position: relative;
      width: 100%;
      height: 40px;
      margin-bottom: 5px;
      .all-deposit-button{
        position: absolute;
        right: 0;
      }
    }
    #pagination{
      text-align: center;
    }
  }
</style>
